<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告位</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <style>
        .layui-input-block input{
            width:200px;
        }
    </style>
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">标题:</label>
        <div class="layui-input-block">
            <input id="title" type="text" name="title" class="layui-input" value="{$list.title}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片:</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="img">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block" id="imglist">
            <img style = "width:100px;height:150px" src = "{$list.image}"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <textarea id="content" style="display: none;" name="content">{$list.content}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">位置:</label>
        <div class="layui-input-block">
            <input id="weizhi" type="number" name="weizhi" class="layui-input" value="{$list.weizhi}">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
        </div>
    </div>
    <input id="id" name = "id" type="hidden" value="{$list.id}">
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    // var editor = UE.getEditor('container');
</script>
<script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
<script src="__PUBLIC__/js/jquery-1.11.1.min.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element','laypage','laytpl','layer','layedit','upload', 'form'], function(){
        var upload = layui.upload,layer=layui.layer,form = layui.form,$=layui.jquery,layedit = layui.layedit;
        //执行实例
        var uploadInst1 = upload.render({
            elem: '#img' //绑定元素
            ,url: '{:U("uploadFile")}' //上传接口
            ,multiple:false
            ,done: function(res){
                //上传完毕回调
                // layer.alert(res.url)
                $("#imglist").empty();
                $("#imglist").append("<img src = "+res.url+" style = 'width:150px;height:250px;'/>");
                $("#imglist").append("<input type = 'hidden' id = 'image' name = 'image' value = '"+res.url+"'/>");
            }
            ,error: function(){
                //请求异常回调
                layer.alert(res)
            }

        });

        // var getTpl = pic.innerHTML
        //     ,view = document.getElementById('view');

        layedit.set({
            uploadImage: {
                url: '{:U("Home/Public/upload1")}'
            }
        });
        var contIdx = layedit.build("content", {
            tool: ["strong","italic","underline","del","|","left","center","right","|","face","image"],height:400
        });

        var pics = [{$vo.pics_arr}];
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '{:U("Home/Public/upload")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result).show(); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.err_code > 0){
                    return layer.msg('上传失败');
                }else{
                    // pics.push("https://www.58zltc.com/Uploads/"+res.file_name);
                    laytpl(getTpl).render({pics:pics}, function(html){
                        view.innerHTML = html;
                    });
                    $("#pics").val(pics.join(','));
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        form.on('submit(formDemo)', function(data){
            // layer.msg(''==parseInt(data.field.order));
            if(''==data.field.weizhi || parseInt(data.field.weizhi)<=0){
                layer.alert('位置大于0');
                return false;
            }

            var post_data = data.field;
            post_data.content = layedit.getContent(contIdx);
            $.post('{:U("save")}',post_data,function(e){
                // layer.alert(e);
                if(1 == e){
                    layer.alert('添加成功');
                    setTimeout(function(){
                        window.parent.location.reload();
                    },2000);
                }else{
                    layer.alert('添加失败');
                }
            })
            return false;
        });
    });
</script>
</body>
</html>